<template>
	<view class="">
		<view class="content" style="background-color: white" v-if="!temState">
			<view class="login-top" :style="{ background: templateConfig.page.themeColor }">
				<view class="user-section">
					<view class="user-info-box" v-if="userInfo">
						<view class="portrait-box">
							<image class="portrait" :src="userInfo.headImg || '../../static/images/avatar.png'"></image>
							<button class="portrait-icon" open-type="chooseAvatar" @chooseavatar="chooseavatar">
								<u-icon name="camera" size="20" color="#fff"></u-icon>
							</button>
						</view>
						<view class="info-box" style="">
							<view
								class=""
								style="display: flex; align-items: center"
								v-if="nameShow == 0"
								@click="nameShow = 1"
							>
								<text class="username">{{ userInfo.userName }}</text>
								<u-icon name="edit-pen" color="#fff" size="24"></u-icon>
							</view>
							<input
								v-if="nameShow == 1"
								type="nickname"
								@blur="blurname"
								:focus="true"
								v-model="userInfo.userName"
								placeholder="请输入昵称"
							/>
							<text class="uid">ID:{{ userInfo.id }}</text>
						</view>
					</view>
					<view class="user-info-box" v-else>
						<view class="portrait-box">
							<image class="portrait" src="../../static/images/avatar.png"></image>
						</view>
						<view class="info-box" style="">
							<text class="username">游客</text>
							<text class="uid">登录后查看</text>
						</view>
					</view>
				</view>

				<view class="tj-sction">
					<view class="tj-item" @click="get_nat('/packageA/user/membercz')">
						<view class="num">
							<view class="num-name">￥</view>
							<text class="num-title">{{ userInfo.balance }}</text>
						</view>
						<view class="name">余额</view>
					</view>

					<view class="tj-item" @click="get_nat('/packageA/integral/integral')">
						<view class="num">
							<text class="num-title" style="">{{ userInfo.integral }}</text>
							<view class="num-name">分</view>
						</view>
						<view class="name">积分</view>
					</view>

					<view class="tj-item" @click="get_nat('/packageA/user/coupon/coupon')" v-if="templateConfig.overall.onesState==1">
						<view class="num">
							<text class="num-title">{{ couponListTotal }}</text>
							<view class="num-name">张</view>
						</view>
						<view class="name">优惠券</view>
					</view>
				</view>

				<view class="member" style="" @click="toMember()">
					<view class="member-name" :style="{ color: templateConfig.page.themeColor }" style="">
						<u-icon name="integral-fill" size="23"  style="margin-top: 8rpx;" :color="templateConfig.page.themeColor"></u-icon>
						购物可享折扣优惠
					</view>
				</view>
			</view>

			<view class="order common" style="margin: 20rpx 0">
				<u-grid :border="false" col="4">
					<u-grid-item
						v-for="(item, index) in recommendedList"
						:key="index"
						@click="TopathF(item.orderStatus)"
					>
						<view class="gridBox" :style="{ backgroundColor: item.rgbColor }">
							<image
								class="grid-img"
								style="width: 60rpx; height: 60rpx"
								:src="item.image"
								lazy-load="true"
								mode="widthFix"
							></image>
						</view>
						<text class="grid-text">{{ item.title }}</text>
					</u-grid-item>
				</u-grid>
			</view>

			<view class="common" style="box-sizing: border-box">
				<view class="address" @click="get_nat('/packageA/user/discountPay/discountPay')">
					<view class="myserver">
						<view
							class="iconfont"
							:class="['icon' + '-' + templateConfig.userIconJson.DiscountPurchaseOrderIcon]"
							style="font-size: 21px"
						></view>
						<view class="mytitle">优惠买单</view>
					</view>
					<u-icon name="arrow-right" size="18" color="#999"></u-icon>
				</view>
				<view class="address" @click="get_nat('/packageA/user/distribution/applyFor')">
					<view class="myserver">
						<view
							class="iconfont"
							:class="['icon' + '-' + templateConfig.userIconJson.GroupvaluestorageIcon]"
							style="font-size: 21px"
						></view>
						<view class="mytitle">分销收益</view>
					</view>
					<u-icon name="arrow-right" size="18" color="#999"></u-icon>
				</view>
				<!-- <view class="address" @click="get_nat('/packageA/user/distribution/applyFor')">
					<view class="myserver">
						<image class="remove-img" src="../../static/images/fenxiao2.png" mode=""></image>
						<view class="contactBtn mytitle">分销收益</view>
					</view>
					<view>
						<u-icon name="arrow-right" size="18" color="#999"></u-icon>
					</view>
				</view> -->
				<view class="address" @click="get_nat('/packageA/address/addressList')">
					<view class="myserver">
						<view
							class="iconfont"
							:class="['icon' + '-' + templateConfig.userIconJson.ReceivingaddressIcon]"
							style="font-size: 21px"
						></view>
						<view class="mytitle">我的地址</view>
					</view>
					<u-icon name="arrow-right" size="18" color="#999"></u-icon>
				</view>
				<view class="address" @click="get_nat('/packageA/user/footmark')">
					<view class="myserver">
						<view
							class="iconfont"
							:class="['icon' + '-' + templateConfig.userIconJson.ApplyForInvoicingIcon]"
							style="font-size: 21px"
						></view>
						<view class="mytitle">申请开票</view>
					</view>
					<u-icon name="arrow-right" size="18" color="#999"></u-icon>
				</view>
				<view class="address" @click="get_nat('/packageA/user/collect')">
					<view class="myserver">
						<view
							class="iconfont"
							:class="['icon' + '-' + templateConfig.userIconJson.MyfavoritesIcon]"
							style="font-size: 21px"
						></view>
						<view class="mytitle">我的收藏</view>
					</view>
					<u-icon name="arrow-right" size="18" color="#999"></u-icon>
				</view>
				<view class="address">
					<view class="myserver">
						<view
							class="iconfont"
							:class="['icon' + '-' + templateConfig.userIconJson.customerServiceIcon]"
							style="font-size: 21px"
						></view>
						<button class="contactBtn mytitle" plain="true" open-type="contact">联系客服</button>
					</view>
					<u-icon name="arrow-right" size="18" color="#999"></u-icon>
				</view>
				
				
			</view>
			<view class="" style="margin-top: 70rpx">
				<about></about>
			</view>
			<tabbar
				:current="3"
				:cart="cartNums"
				:tabbarList="templateConfig.tabbarList"
				:template="templateConfig"
			></tabbar>
		</view>
		
	</view>
</template>

<script>
import {
	searchUserInfoById,
	userIsLogin,
	searchPlugsPetRarchivesList,
	searchUserOrderListByStatus,
	searchPlugsCollectByUserId,
	getRecommen,
	updateUserInfo,
	uploadImages,
	searchPlugsCouponsByUserId,
	getPlugsShopCartByUserId,
	imageAve
} from '../../static/utils/api.js';
import { https } from '../../static/utils/request.js';
export default {
	data() {
		return {
			templateConfig: uni.getStorageSync('templateConfig'),
			temState: uni.getStorageSync('templateExpireTime'),
			nowBusinessInfo: {},
			couponListTotal: 0,
			cartNums: 0,
			nameShow: 0,
			userInfo: uni.getStorageSync('userInfo'),
			recommendedList: [
				{
					title: '全部订单',
					image: 'https://oss.daccf.com/teei5jxcq4jjoke5y7jlr/全部/6fc36f09-cbc7-4476-9379-cc90ce2adfe8.png',
					orderStatus: -1,
					rgbColor: 'rgba(238, 88, 44, 0.1)'
				},

				{
					title: '待付款',
					image: 'https://oss.daccf.com/spf0q93q974bv9554shfp/订单/e94ee606-37e7-4161-a800-8549d06aeb85.png',
					orderStatus: 0,
					rgbColor: 'rgba(238, 88, 44, 0.1)'
				},
				{
					title: '待收货',
					image: 'https://oss.daccf.com/spf0q93q974bv9554shfp/订单/7fb35612-5173-407d-b44e-51cda8246d04.png',
					orderStatus: 3,
					rgbColor: 'rgba(238, 88, 44, 0.1)'
				},
				{
					title: '退款/售后',
					image: 'https://oss.daccf.com/spf0q93q974bv9554shfp/订单/f01f7346-b80c-452e-a6a0-31950ba0c6e7.png',
					orderStatus: 8,
					rgbColor: 'rgba(238, 88, 44, 0.1)'
				}
			]
		};
	},
	
	onShow() {
		uni.setNavigationBarTitle({
			title: this.templateConfig.tabbarList[3].iconName
		});
		this.getimageAve();
		this.nowBusinessInfo = uni.getStorageSync('nowBusinessInfo');
		userIsLogin().then((sult) => {
			if (sult.body.isLogin) {
				this.getuserInfo();
				this.getCartList();
				this.getcouponList();
			} else {
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/user/login'
					});
				}, 500);
			}
		});
	},
	
	methods: {
		// 获取主题色
		getimageAve() {
			this.recommendedList.forEach(async (item) => {
				let rgbColor = await imageAve(item.image);
				this.$set(item, 'rgbColor', this.getRgb(rgbColor.RGB.replace('0x', '#')));
			});
			console.log(this.recommendedList);
		},
		getRgb(rgb) {
			// 输入颜色的十六进制表示法
			const hexColor = rgb;
			// 从十六进制中提取红、绿、蓝通道值
			const red = parseInt(hexColor.slice(1, 3), 16);
			const green = parseInt(hexColor.slice(3, 5), 16);
			const blue = parseInt(hexColor.slice(5, 7), 16);
			// 设置透明度值（0到1之间）
			const opacity = 0.1;
			// 将转换后的值组合成 RGBA 值
			const rgbaValue = `rgba(${red}, ${green}, ${blue}, ${opacity})`;
			return rgbaValue;
			// 输出结果：rgba(0, 255, 0, 1)
		},

		Topath(route) {
			uni.navigateTo({
				url: route
			});
		},
		get_nat(route) {
			uni.navigateTo({
				url: route
			});
		},

		TopathF(index) {
			const self = this;
			if (index == 8) {
				uni.navigateTo({
					url: `/pages/order/service/index?id=${index}`
				});
			} else {
				uni.navigateTo({
					url: `/pages/order/order?id=${index}`
				});
			}
		},
		toMember() {
			uni.navigateTo({
				url: `/packageA/user/member/member`
			});
		},
		// 获取个人信息
		getuserInfo() {
			let data = {
				userId: uni.getStorageSync('userInfo').id
			};
			searchUserInfoById(data).then((res) => {
				if (res.code == 200) {
					this.userInfo = res.body;
					uni.setStorageSync('userPayJson', res.body.userPayJson);
				}
			});
		},
		// 获取购物车数量
		getCartList() {
			let postdata = {
				page: 1,
				size: 40,
				businessId: this.nowBusinessInfo.businessId.toString(),
				userServiceToken: this.userToken
			};
			getPlugsShopCartByUserId(postdata).then((res) => {
				if (res.code === 200) {
					this.cartNums = res.body.total;
					uni.setStorageSync('goodsNum', this.cartNums);
				}
			});
		},

		// 获取优惠券数量
		getcouponList() {
			let postdata = {
				businessId: this.nowBusinessInfo.businessId.toString(),
				status: 0
			};
			searchPlugsCouponsByUserId(postdata).then((res) => {
				if (res.code == 200) {
					this.couponListTotal = res.body.total;
				}
			});
		},
		// 修改头像
		chooseavatar(img) {
			let that = this;
			uni.showLoading({
				title: '头像更新中',
				mask: true
			});
			console.log(img);
			let data = {
				file: img.detail.avatarUrl, //你要传的临时文件
				type: 1
			};
			uploadImages(data).then((res) => {
				if (res.code == 200) {
					that.userInfo.headImg = res.body;
					updateUserInfo(that.userInfo).then((ues) => {
						if (ues.code == 200) {
							uni.hideLoading();
							this.getuserInfo();
							uni.showToast({
								title: '更新成功'
							});
						}
					});
				} else {
					uni.hideLoading();
					uni.showModal({
						content: res.msg,
						showCancel: false
					});
				}
			});
		},
		blurname(e) {
			let that = this;
			that.userInfo.userName = e.detail.value;
			updateUserInfo(that.userInfo).then((ues) => {
				if (ues.code == 200) {
					uni.hideLoading();
					this.getuserInfo();
					uni.showToast({
						title: '更新成功'
					});
					that.nameShow = 0;
				}
			});
		}
	}
};
</script>

<style lang="less">
.address {
	font-size: 30rpx;
	display: flex;
	height: 90rpx;
	align-items: center;
	font-size: 28rpx;
	padding: 0 50rpx;
	justify-content: space-between;
	box-sizing: border-box;
	.myserver {
		display: flex;
		align-items: center;
		width: 96%;

		.mytitle {
			margin-left: 18rpx;
			color: #000;
		}

		.contactBtn {
			width: 96%;
			border: none;
			height: 90rpx;
			line-height: 90rpx;
			text-align: left;
			font-size: 30rpx;
			padding: 0rpx;
		}
	}
}

.content {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;

	.common {
		width: 94%;
		border-radius: 16rpx;
		background-color: #fff;
	}

	.login-top {
		color: #fff;
		width: 100%;
		height: 470rpx;
		background-color: #ff5e31;
		position: relative;
		.user-section {
			padding: 20rpx 30rpx 0;
			border-radius: 20rpx;
			.user-info-box {
				height: 180rpx;
				display: flex;
				align-items: center;
				z-index: 1;
				.portrait-box {
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
					position: relative;

					.portrait {
						width: 130rpx;
						height: 130rpx;
						border-radius: 50%;
						vertical-align: top;
					}

					.portrait-icon {
						background-color: rgb(255, 94, 49);
						width: 50rpx;
						height: 50rpx;
						border-radius: 25rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						position: absolute;
						bottom: 0;
						right: -10rpx;
					}
				}

				.info-box {
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;

					.username {
						font-size: 36rpx;
						font-weight: 700;
						margin-bottom: 15rpx;
					}

					.uid {
						font-size: 24rpx;
					}
				}
			}
		}

		.tj-sction {
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding:0 30rpx 0;
			.tj-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				width: 120rpx;
				height: 100rpx;

				.num {
					display: flex;
					align-items: flex-end;
					height: 80rpx;

					.num-title {
						font-weight: 700rpx;
						margin-right: 5rpx;
						font-size: 44rpx;
						height: 60rpx;
					}

					.num-name {
						height: 45rpx;
					}
				}

				.name {
					height: 20rpx;
					opacity: 0.6;
				}
			}

			.line {
				width: 2rpx;
				height: 60rpx;
				background-color: #fff;
			}
		}
		.member {
			position: absolute;
			bottom: 0;
			width: 100%;
			padding:0 30rpx;
			box-sizing: border-box;
			.member-name {
				display: flex;
				align-items: center;
				background-color: #f8f8f8;
				padding: 20rpx 30rpx;
				border-radius: 20rpx 20rpx 0 0;
			}
		}
	}

	.order {
		height: 190rpx;
		padding: 18rpx;
		box-sizing: border-box;

		.gridBox {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #000;
			// opacity: 0.3;
		}

		.order-title {
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;

			.my-order {
				font-size: 32rpx;
				font-weight: 600;
				font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
			}

			.more {
				display: flex;
				align-items: center;
				color: #9a9a9a;
			}
		}

		.grid-text {
			margin-top: 10rpx;
			font-size: 26rpx;
			color: #000;
		}
	}

	.score {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 10rpx;
		box-sizing: border-box;
		margin: 30rpx auto;

		.cardNum {
			text-align: center;
			font-size: 36rpx;
			font-weight: 600;
			margin-bottom: 20rpx;
		}

		.card-img {
			display: flex;
			align-items: center;
			color: #9a9a9a;
			font-size: 26rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 4rpx;
			}
		}
	}

	.menu {
		padding: 30rpx;
		box-sizing: border-box;
		margin: 30rpx auto;

		.menu-title {
			margin-bottom: 26rpx;
			font-size: 32rpx;
			font-weight: 600;
			font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
		}

		.removeStorge {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;

			// margin-top:10rpx;
			// margin-bottom: 20rpx;
			.removeStorge-left {
				width: 200rpx;
				display: flex;
				align-items: center;

				.remove-img {
					width: 40rpx;
					height: 40rpx;
					margin-right: 18rpx;
				}

				.remove-text {
					white-space: nowrap;
					font-size: 30rpx;
					color: #000;
				}
			}
		}
	}

	.remove-img {
		width: 50rpx;
		height: 50rpx;
		// margin-right: 15rpx;
	}
}
</style>
